import React, { useState, useEffect } from 'react'
import * as echarts from 'echarts';
// https://echarts.apache.org/examples/zh/index.html
function Com() {
  const [type, setType] = useState('line')
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: type
      }
    ]
  }
  
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option)
  }, [type])


  const otherOption = {
    title: {
      text: 'Stacked Line'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type,
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type,
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type,
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type,
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type,
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  }
  const [data, setData] = useState(option)
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('main1'));
    myChart.setOption(data)
  }, [data])
  return (
    <div>
      <h1>echarts</h1>
      <button onClick = { () => setType('bar')}>柱状图</button>
      <button onClick = { () => setType('pie')}>饼状图</button>
      <button onClick = { () => setType('line')}>折线图</button>
      <div id="main" style = {{ width: '100%', height: 600 }}></div>
      <button onClick = { () => setData(otherOption)}>改变数据</button>
      <div id="main1" style = {{ width: '100%', height: 600 }}></div>
    </div>
  )
}

export default Com


